<template>
  <div class="realName">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <div v-if="realNameStatus == 'no'" class="content">
      <!--    真实姓名-->
      <div class="contentItem borderBottom flex-space-between">
        <div>真实姓名</div>
        <input
          type="text"
          v-model="name"
          placeholder="请输入您的真实姓名">
      </div>
      <!--    身份证号-->
      <div class="contentItem borderBottom">
        <div class="flex-space-between">
          <div>身份证号</div>
          <input
            type="number"
            v-model="cardID"
            maxlength="18"
            oninput="if(value.length>11)value=value.slice(0,18)"
            placeholder="请输入您的身份证号">
        </div>
      </div>
<!--      协议-->
      <div class="agreement flex-start">
        <div class="flex-start" @click="choosedAgreement">
          <img v-if="choosedAgreementShow" src="http://job.dayinyun.com/realNameIcon.png" alt="">
          <img v-else src="http://job.dayinyun.com/realNameGrayIcon.png" alt="">
        </div>
        已阅读并同意<router-link to="agreement"><span>《用户协议》</span></router-link>
      </div>
<!--      认证按钮-->
      <button class="confirmButton" :class="{'activity':name&&cardID&&choosedAgreementShow}" @click="submitUserVerify">同意协议并认证</button>
    </div>
<!--    认证成功-->
    <div v-else class="successContent flex-space-center">
      <img src="http://job.dayinyun.com/realNameSuccess.png" alt="">
      <span>恭喜您认证成功</span>
      <button @click="goBack()">返回</button>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader";
  import {GETUSERVERIFY, SUBMITUSERVERIFY} from "../../apis/mine";
  export default {
    name:"realName",
    components:{
      commonHeader,
    },
    data() {
      return {
        title: "实名认证",
        name:"",//姓名
        cardID:"",//身份证
        realNameStatus:'',//是否实名认证 yes 认证 no 未认证
        choosedAgreementShow:true,//选中协议
      }
    },
    mounted() {
      // 获取用户是否实名认证
      this.getUserVerify()
    },
    methods:{
      // 返回
      goBack(){
        if(this.getsesStore("fullPath")){
          this.$router.push({path:this.getsesStore('fullPath')});
        }else if (window.history.length>1){
          window.history.go(-1)
        }else {
          if (this.$systemInfo() === "android") {
            window.android.closeCurrentPage();
          } else if (this.$systemInfo() === "ios") {
            window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
          }
        }
      },
      // 选中协议
      choosedAgreement(){
        this.choosedAgreementShow = !this.choosedAgreementShow
      },
      // 发起短视频
      createVideo(){
        let that = this;
        let channel = "app";//频道
        let activity_id = 0;//id
        let source = "app";//来源
        let promotion_link_url = "";//推广链接
        that.$toast("发起视频")
        if (that.$systemInfo() === "android") {
          that.$toast("app - android")
          window.android.releasedVideo(channel,activity_id,source,promotion_link_url);
        } else if (that.$systemInfo() === "ios") {
          let data={
            channel:'app',//频道
            activity_id:0,//id
            source:"app",//来源
            promotion_link_url:"",//推广链接
          }
          window.webkit.messageHandlers.releasedVideo.postMessage(JSON.stringify(data));
        }
      },
      // ------------------接口开始-------------
      //获取用户是否实名认证
      getUserVerify(){
        let getUserVerify = GETUSERVERIFY
        getUserVerify().then(res=>{
          if(res.data.code*1===200){
            // status 「yes」已认证「no」未认证
            this.realNameStatus = res.data.data.status ? res.data.data.status :'no'
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },

      //提交认证信息 获取用户是否实名认证
      submitUserVerify(){
        if(!this.name){
          this.$toast("请输入真实姓名！")
          return;
        }
        if(!this.cardID){
          this.$toast("请输入身份证号！")
          return;
        }
        let submitUserVerify = SUBMITUSERVERIFY
        let params = {
          true_name:this.name,//姓名
          chinaid:this.cardID,//身份证id
        }
        submitUserVerify(params).then(res=>{
          if(res.data.code*1===200){
            this.$toast("认证成功")
            // 获取用户信息
            this.getUserVerify()
            // 发起短视频
            this.createVideo()
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },

      // ---------------------接口结束---------------------------------
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .realName{
    width:100%;
    padding-top:1.38rem;
    box-sizing: border-box;
    .content{
      width: 100%;
      padding:0rem 0.3rem;
      box-sizing: border-box;
      .contentItem{
        padding:0.3rem 0;
        box-sizing: border-box;
        font-size: @fontSize34;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color:@whiteColor;
        input{
          flex:1;
          margin-left: 0.2rem;
          background:none;
          text-align: right;
        }
        input::-webkit-input-placeholder {color:rgba(255,255,255,0.32);text-align: right;}
        input::-moz-placeholder { color:rgba(255,255,255,0.32); text-align: right;} /* firefox 19+ */
        input:-ms-input-placeholder { color:rgba(255,255,255,0.32);text-align: right; } /* Internet Explorer 10+ */
        input:-moz-placeholder { color:rgba(255,255,255,0.32); text-align: right;} /* firefox 14-18 */
        .phoneTips{
          font-size: @fontSize24;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color:#FD0000;
          margin-top:0.06rem;
        }
      }
      .borderBottom{
        border-bottom: 0.02rem solid rgba(102,102,102,0.4);
      }
      .agreement{
        font-size: @fontSize28;
        font-family: @fontFamily400;
        font-weight: @fontWeight400;
        color:#666666;
        margin:0.24rem 0 0.56rem 0;
        img{
          width:0.3rem;
          height:auto;
          margin-right:0.18rem;
        }
        span{
          color:#3281F6;
          background:none;
          border:none;
          outline:none;
        }
      }
      .confirmButton{
        width:100%;
        height:0.86rem;
        border-radius: 0.1rem;
        background:#232323 ;
        font-size: @fontSize36;
        font-family: @fontFamily400;
        font-weight: @fontWeight500;
        color:#FFFFFF;
      }
      .activity{
        background:#FD0000 ;
      }
    }
    .successContent{
      position: fixed;
      top:0;
      left: 0;
      right:0;
      bottom:0;
      flex-direction: column;
      img{
        width:1.75rem;
        height:auto;
      }
      span{
        font-size: @fontSize34;
        font-family: @fontFamily400;
        font-weight: @fontWeight400;
        color:#ffffff;
        margin:1.1rem 0 0.52rem 0;
      }
      button{
        width:1.74rem;
        height:0.56rem;
        border:0.03rem solid #FD0000;
        background:none;
        border-radius: 0.27rem;
        font-size: @fontSize30;
        font-family: @fontFamily400;
        font-weight: @fontWeight400;
        color:#FD0000;
      }
    }
  }
</style>
